<script lang="ts" setup>
import { computed, onMounted, ref,reactive } from 'vue'

import {getGoodsList,addGoods,getGoodsInfo,editGoods,delGoods,getGoodsType} from '../../api/taozhuang/shangpin.ts'
let data=ref([])
//分页
// 几页
const currentPage4 = ref(1)
// 每页多少条
const pageSize4 = ref(10)
const total = ref('')
onMounted(() => {
  get()
})
function get(){
  getGoodsList(currentPage4.value,pageSize4.value).then(res=>{
        data.value=Object.values(res.data.data)
        total.value=res.data.total
      

    })
}
const handleSizeChange = (val: number) => {
  get()
}
const handleCurrentChange = (val: number) => {
  get()
}






//图片

const imageUrl = ref('')
let handleAvat=(e:any)=>{
   let filedata = e.raw;
 useFrom.value.img_path = filedata;
 // 创建fliereader对象
 
 const reader = new FileReader();
 reader.onload=()=>{
  imageUrl.value = reader.result as string;
  useFrom.value.img_path= reader.result as string;
 }
 reader.readAsDataURL(filedata);
}

// 弹框显示和隐藏
let dialogVisible = ref(false)
// 添加修改共用一个弹框使用的
let flag = ref(false)



let useFrom=ref({
        category_id:'',
        name:'',
        describe:'',
        img_path:'',
        price:'',
        number:'',
        market:'',
        sales_volume:'',
        content:'',
        ids:''
})


//添加功能和修改功能
let add=()=>{
    if(flag.value==false){
        // 添加
        addGoods(useFrom.value).then((res:any)=>{
           
                get()
                dialogVisible.value=false
                useFrom.value={
                    category_id:'',
                    name:'',
                    describe:'',
                    img_path:'',
                    price:'',
                    number:'',
                    market:'',
                    sales_volume:'', 
                    content:'' ,
                    ids:''
                }
        })
    }else{
        // 修改
        editGoods(useFrom.value).then((res:any)=>{
           
                get()
                dialogVisible.value=false
        })

    }
}

//回显功能

const handleEdit = (index: number, row:any ) => {
 flag.value=true
 dialogVisible.value=true
 getGoodsInfo(row.id).then((res:any)=>{
        useFrom.value=res
        imageUrl.value=res.img_path
       
        
            
 })
 
}


//删除功能
const handleDelete = (index: number, row:any ) => {
  delGoods(row.id).then((res:any)=>{
    console.log(res)
    get()
})
}

//分类
let type=ref([])
onMounted(() => {
  getGoodsType().then((res:any)=>{
    type.value=Object.values(res)

  })
})


</script>

<template>
        <!-- 添加商品 -->
        <div>          
                    <el-button @click="dialogVisible=true">添加</el-button>
        </div>

                    <!-- 商品列表 -->
            <div>
                <el-table :data="data" style="width: 100%">
        <el-table-column label="套装分类" prop="category_id" >
                      
        </el-table-column>
        <el-table-column label="套装名称" prop="name" />
        <el-table-column label="套装描述" prop="describe" />
        <el-table-column label="套装图片" prop="img_path"  #default="scope">
            <img :src="scope.row.img_path" alt=""  style="width: 100px; height: 100px;">
            </el-table-column>
        <el-table-column label="价格" prop="price" />
        <el-table-column label="库存" prop="sales_volume" />
        <el-table-column label="市场价" prop="market" />
        <el-table-column align="right" label="操作">
       
        <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
            >
            <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
            >
        </template>
        </el-table-column>
            </el-table>

            </div>

            
                             <!-- 添加弹框 -->
  <div>
    <el-dialog v-model="dialogVisible" :title="flag==false?'添加弹框':'修改弹框'" width="800">
      <span>
        <!-- 分类 -->
        <div>
          套装分类：  <el-select
                    v-model="useFrom.category_id"
                    placeholder="Select"
                    size="large"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in type"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    />
                  </el-select>
        </div>
     
        <!-- 名称 -->
        <div>
          套装名称:<el-input
            placeholder="请输入排序号"
            style="width: 650px"
            v-model="useFrom.name"
          
          />
        </div>
        
        <!-- 描述 -->
        <div>
              描述：  <el-input
        v-model="useFrom.describe"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="Please input"
    />
        </div>

        <!-- 图片 -->
        <div>
            <el-upload
    class="avatar-uploader"
    :auto-upload="false"
    @change="handleAvat($event)"
    
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="width: 100px; height: 100px;"/>
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
        </div>

        <!-- 价格 -->
        <div>
            价格： <el-input
                    v-model="useFrom.price"
                    style="width: 240px"
                    placeholder="Please input"
                    :formatter="(value:any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                    :parser="(value:any) => value.replace(/\$\s?|(,*)/g, '')"
                />
        </div>
      

         <!-- 库存 -->
         <div>
            库存: <el-input
                    v-model="useFrom.number"
                    
                    style="width: 240px"
                    placeholder="Please input"
                   
                />
        </div>

             <!-- 市场价 -->
             <div>
                市场价: <el-input
                    v-model="useFrom.market"
                    style="width: 240px"
                    placeholder="Please input"
                    :formatter="(value:any) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                    :parser="(value:any) => value.replace(/\$\s?|(,*)/g, '')"
                />
            </div>

        <!-- 虚拟销量 -->
                <div>
                    虚拟销量: <el-input
                            v-model="useFrom.sales_volume"
                            
                            style="width: 240px"
                            placeholder="Please input"
                        
                        />
                </div>

               <!-- 详情  -->
                    <div>
                      <div style="border: 1px solid #ccc">
            <div class="editor">
              <quill-editor
                content-type="html"
                v-model:content="useFrom.content"
                style="width: 100%; height: 400px"
                toolbar="full"
              >
              </quill-editor>
            </div>
          </div>
                    </div>


      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="add">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
     
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>


</template>

<style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
